<template>
    <div class="Nav">
        <ul>
            <li>
                <span class="iconfont icon-ziyuan"></span>
                <p>首页</p>
            </li>
            <li>
                <span class="iconfont icon-shangcheng1"></span>
                <p>分类</p>
            </li>
            <li>
                <span class="iconfont icon-gouwuche2"></span>
                <p>购物车</p>
            </li>
            <li>
                <span class="iconfont icon-wode"></span>
                <p>我的</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav"
    }
</script>

<style scoped lang="less">
    @baseFontSize:20px;
    @baseSize:20;
    html{
        font-size: @baseFontSize;
    }
    .px2rem(@name,@px){
    @{name}:@px / 2 / @baseSize * 1rem;
    }

    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }
    .Nav{
        font-family: Avenir, Helvetica, Arial, sans-serif;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
    .px2rem(width,750);
        background: white;
        ul{
            display: flex;
            .px2rem(padding,30);
            .px2rem(width,750);
            li{
                flex: 1;
                .px2rem(height,80);
                text-align: center;
                .iconfont{
                    .px2rem(font-size,40)
                }
                p{
                    .px2rem(font-size,30)
                }
            }
        }
    }
</style>